---
slug: ../Button
---

import Basic from "../../../_samples/main/Button/Basic/Basic.md";
import Design from "../../../_samples/main/Button/Design/Design.md";
import IconOnly from "../../../_samples/main/Button/IconOnly/IconOnly.md";
import TextAndIcon from "../../../_samples/main/Button/TextAndIcon/TextAndIcon.md";
import EndIcon from "../../../_samples/main/Button/EndIcon/EndIcon.md";
import CustomStyling from "../../../_samples/main/Button/CustomStyling/CustomStyling.md";
import MenuButton from "../../../_samples/main/Button/MenuButton/MenuButton.md";
import ButtonBadge from "../../../_samples/main/Button/ButtonBadge/ButtonBadge.md";
import Loading from "../../../_samples/main/Button/Loading/Loading.md"

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Design
The Button supports several designs to indicate the priority or the nature of the action.

<Design />

### Icon Only
<IconOnly />

### Text and Icon
<TextAndIcon />

### Icon at the End
Button allows adding of second Icon at the end.

<EndIcon />

### Custom Styling
To some extent, the Button allows customization with pure CSS as shown in the sample.

<CustomStyling />

### Menu Button
Achieve Menu Button functionality.

<MenuButton />

### Button with badge
Add a badge to the button.

<ButtonBadge />

### Button with Loading
<Loading />